<template>
  <div class="import_info">
    <a-form layout="inline">
      <a-form-item label="导入模式">
        <a-select v-model:value="form.importModel" class="import_model" @change="handleChangeModel">
          <a-select-option v-for="item in importModelList" :key="item.key" :value="item.key">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </a-form-item>
      <a-form-item v-show="isShowKeyField" label="更新关键字段">
        <a-tree-select
          v-model:value="form.keyField"
          class="import_model"
          allow-clear
          multiple
          :field-names="{
            children: 'children',
            title: 'title',
            key: 'dataIndex',
            value: 'dataIndex'
          }"
          :max-tag-count="maxTagCount"
          :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
          :tree-data="currentFormColumns"
          placeholder="请选择"
        />
      </a-form-item>
    </a-form>
    <div class="down_info">
      <p>为保证数据导入顺利，请下载>> <span class="down" @click="downTemplate">标准模板</span></p>
      <!-- eslint-disable vue/no-v-html -->
      <div
        ><p>支持2M以内的xls,xlsx格式文件</p><p>文件中数据不能超过50000行、200列</p><p>子表单明细同样占用行数</p
        ><p
          >日期字段：在通过Excel导入日期数据时，只要符合以下情况都能识别日期事件格式。在Excel中设置了单元格格式为“日期”,或符合标准日期格式的字符串</p
        ><p>复选框和下拉复选框：可以在一个字段中录入多个值，以英文逗号（即半角逗号）隔开复选框的不同选项</p></div
      >
    </div>
    <upload-file ref="uploadFile" @change="handleUploadChange" />
  </div>
</template>

<script>
  import UploadFile from '@/components/table/UploadFile.vue'
  import { computed, defineComponent, reactive, ref, watch } from 'vue'
  import { cloneDeep } from '@/utils/index'
  import { isEmptyArr, isNullOrEmpty } from '@/utils/is'

  export default defineComponent({
    name: 'FormImport',
    components: {
      UploadFile
    },
    props: {
      columns: {
        type: Array,
        default: () => {
          return []
        }
      },
      pageId: {
        type: Number,
        default: () => {
          return 0
        }
      },
      dataSourceName: {
        type: String,
        default: () => {
          return ''
        }
      },
      downloadExcel: {
        type: Function
      },
      downImportTemplate: {
        type: Function
      }
    },
    emits: ['changeUpload'],
    setup(props, { emit }) {
      const uploadFile = ref(null)
      const maxTagCount = 2 // 多选树最多显示数量
      const isShowKeyField = ref(true)
      const form = reactive({
        file: '',
        importModel: 'UPDATE',
        keyField: []
      })
      const importModelList = ref([
        // 导入模式
        { name: '仅更新', key: 'UPDATE' },
        { name: '仅新增', key: 'ADD' },
        { name: '新增并更新', key: 'ADD_AND_UPDATE' }
      ])
      const noCloumn = ['sequenceNumber', 'operation']
      const currentFormColumns = computed(() => {
        const dataList = cloneDeep(props.columns)
        return dataList
          .filter(item => !noCloumn.includes(item.dataIndex))
          .map(item => ({
            dataIndex: item.dataIndex,
            title: item.title,
            children: item.children,
            disabled: !(isNullOrEmpty(item.children) || isEmptyArr(item.children))
          }))
      })
      watch(
        () => form,
        newValue => {
          emit('changeUpload', newValue)
        },
        { deep: true }
      )
      // 导入模式更改
      const handleChangeModel = value => {
        isShowKeyField.value = !(value === 'ADD')
      }
      // 清空表单
      const clearForm = () => {
        form.file = ''
        form.importModel = 'UPDATE'
        form.keyField = []
        isShowKeyField.value = true
        uploadFile.value.fileList = []
      }
      // 下载导入模板
      const downTemplate = () => {
        props.downImportTemplate(props.pageId).then(res => {
          props.downloadExcel(res, props.dataSourceName)
        })
      }
      // 上传文件
      const handleUploadChange = file => {
        if (file != '') {
          form.file = file
        } else {
          form.file = ''
        }
      }
      return {
        importModelList,
        form,
        maxTagCount,
        isShowKeyField,
        currentFormColumns,
        handleChangeModel,
        downTemplate,
        handleUploadChange,
        clearForm
      }
    }
  })
</script>

<style lang="less" scoped>
  .import_info {
    width: 100%;
  }
  .import_info .down_info {
    width: 100%;
    margin: 20px 0px;
  }
  .import_info .down_info :deep(p) {
    padding-left: 20px;
    position: relative;
  }

  .import_info .down_info :deep(p::after) {
    content: '.';
    font-size: 30px;
    color: #000;
    left: 0px;
    top: -15px;
    position: absolute;
    line-height: 30px;
  }

  .import_info .import_model {
    min-width: 120px;
    max-width: 300px;
  }

  .import_info .down {
    cursor: pointer;
    color: rgb(15, 170, 23);
  }
</style>
